<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡的右键菜单</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"/>
		<link rel="stylesheet" href="../js/easyui/themes/icon.css"  />
		
		<!-- 引入ztree,创建树形菜单 -->
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css"/>
		
		<script type="text/javascript">
			//页面加载后执行
			$(function(){
				//1. 进行ztree菜单设置
				var setting = {
					data:{
						simpleData:{
							enable:true  //支持简单的json数据
						}
					},
				
				
				callback:{
					onClick:function(event,treeId,treeNode,clickFlag){
					
						var content = '<div style="width:100%;height:100%;overflow:hidden;">'
						+'<iframe src=" '
						+ treeNode.page
						+'" scrolling="auto" style="width:100%;height:100%;border:1px;"></iframe></div>';
						
						//没有page树形菜单,不打开选项卡
						if(treeNode.page != undefined && treeNode.page != ""){
							//如果选项卡已经打开,选中
							if($("#mytabs").tabs('exists',treeNode.name)){
								//选中选项卡
								$("#mytabs").tabs('select',treeNode.name);
							}else{
								//如果没有打开,添加选项卡
								$("#mytabs").tabs('add',{
									title:treeNode.name,
									content:content,
									closable:true
								});
							}
						}
						
					}
				}
			};
				//2.提供树形菜单数据
				var zNodes = [
					{id:1,pId:0,name:"西区球队"},
					{id:12,pId:1,name:"西南赛区" },
					{id:13,pId:1,name:"其他赛区"},
					{id:121,pId:12,name:"马刺",page:"http://baike.baidu.com/link?url=DID2AYt5tfPFG3DNwOFiLrxHT3W5qrPPpYOCHg1ZZ7y8-2F7V-S3gvSyfq5Ssr9XY95sg-z9_Qvpee06WeacOdAhnkLx_oWa_n0PRzYA9q3QAfd3E3ihONsqwnks3oxHNfaSvsJdQ2V0jyS92rQENGGjX3l_aoVqR9U9HRZZeqTaigTfO4ohD1HBnJSkkFdVvm_CkqjSldrPoinwal57Oo9B7o0XxDOF63f4WKN1VPK"},
					{id:122,pId:12,name: "火箭",page:"http://baike.baidu.com/link?url=GOPxhjeKZWCyhZdth9YizLUGlsty5sM7o2s3IsRASNsKxQ_my7K7NM8mZxDXNMEZrBHJ9cAfG-d4dassQGi_EFCdRjidhyK1tcQfyZOWPwi3BnwIA4sjajqQWdr9EPpIQS33U8BxtXMgMeEHVx7DiD42FR-nNI79raFNvloSu4OLyW-hAMu8IhZcY-MAS_ho-enSHq-yyOymshI8U8T5Uq" }
				];
				// 3. 生成树形菜单
				$.fn.zTree.init($("#westTeams"),setting,zNodes);
				
				//在选项卡的右键的位置显示菜单
				$("#mytabs").tabs({
					
					
					onContextMenu:function(e,title,index){
						//阻止默认事件的显示
						e.preventDefault();
						
						$("#mm").menu('show',{
							left:e.pageX,
							top:e.pageY
						});
					}
				});
				
				
				
			});
		</script>
		
	</head>
	<body class="easyui-layout">
		<div data-options="region:'north',title:'NBA playoffs!!!' " style="height:100px;" >NORTH...........</div>
		<div data-options="region:'west',title:'west...'" style="width:200px;" >
			<div class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'西部豪强'" >
					<!-- 通过ztree插件,制作树形菜单 -->
					<ul id="westTeams" class="ztree" ></ul>
				</div>
				<div data-options="title:'东部豪强'" >东部球队</div>
			</div>
		</div>
		<div data-options="region:'center',title:'CENTER' "  >
			<div id="mytabs" class="easyui-tabs" data-options="fit:true">
				<div data-options="title:'Teams in WEST',closable:'true'">
					<a href="javascript:void(0)" id="baidu">百度</a>
				</div>
				<div data-options="title:'Teams in EAST',closable:'true'">东部豪强</div>
			</div>
		</div>
		<div data-options="region:'east',title:'EAST'" style="width:120px">EAST.......</div>
		<div data-options="region:'south',title:'South'" style="height:120px;" >South........</div>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div >关闭当前窗口</div>
			<div>关闭右侧窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel'">关闭全部窗口</div>
		</div>
	</body>
</html>
